var href = decodeURI(location.href)
console.log(href);
function getQueryString(url){
    //通过？分割数组
    let cs = url.split("?")[1]
    console.log(cs);

    //判断如果没有参数，返回null
    if(!cs){
        return null;
    }
    
    //针对所有参数分割成数组
    let csarr = cs.split("&")
    console.log(csarr);

    //定义一个接受结果的对象
    let csobj = {};
    //遍历所有的参数数组，通过=将key和value分割存入对象
    csarr.forEach(item => {
        csobj[item.split("=")[0]] = item.split("=")[1];
    });
    console.log(csobj);
    return csobj;
}
var cs = getQueryString(href);
console.log(cs);

var list = document.querySelector(".list")
var outbox = document.querySelector(".lunimg");
var out = document.querySelector(".lunimg ul");

const xhr = new XMLHttpRequest();
xhr.open("get","http://chst.vip:1234/api/getcouponproduct?couponid="+cs.couponId,false)
xhr.onload = function(){
    let res = JSON.parse(this.responseText)
    console.log(res);
    console.log(res.result);
    let ele1 = "";
    let ele2 = "";
    res.result.forEach(item=>{
        ele1 += `<li couponProductId="${item.couponProductId}">
                    ${item.couponProductImg}
                    <div class="list_right">
                        <h4>${item.couponProductName}</h4>
                        <p>${item.couponProductPrice}</p>
                        <span>${item.couponProductTime}</span>
                    </div>
                </li>`
        ele2 += `<li couponProductId="${item.couponProductId}">
                    ${item.couponProductImg}
                </li>`
    })
    list.innerHTML = ele1
    out.innerHTML = ele2
}
xhr.send();

console.log(out);


//轮播图
    //思路:
    //在原有的ul外另创建一个黑色透明页面用来展示中间的轮播图
    //在获取原有的数据列表时就创建ele2用来接收图片
    //遍历原有的列表，给item设置点击事件，再遍历轮播图列表imgli，里面的value设置不显示
    //imgli遍历外，设置选中的那项显示，同时设置黑色页面下拉
    //右按钮设置点击事件，里面遍历的是imgli
    //最后设置关闭的点击事件，黑色页面上去
    
var oli = document.querySelectorAll(".list li")
var imgli = document.querySelectorAll(".lunimg li")
var close = document.querySelector(".lunimg span")
var right = document.querySelector(".right")
var left = document.querySelector(".left")


oli.forEach((item,index)=>{
    item.onclick = function(){
        var productid = item.getAttribute("couponProductId");
        console.log(productid);
        imgli.forEach(value=>{
            value.style.display = "none";
        })
        imgli[productid].style.display = "block";
        outbox.style.transform = "translateY(0px)";
        // imgli[index].style.display = "block";
        right.onclick = function(){
            imgli.forEach(oinner=>{
                oinner.style.display = "none";
            })
            productid++;
            if(productid>imgli.length){
                alert("已经是最后一页啦~");
                productid=0;
            }
            imgli[productid].style.display = "block";
        }
        left.onclick = function(){
            imgli.forEach(oinner=>{
                oinner.style.display = "none";
            })
            productid--;
            if(productid<0){
                alert("已经是第一页拉~")
                productid=imgli.length-1
            }
            imgli[productid].style.display = "block"
        }
    }
    
})
// img.forEach((item,index)=>{
//     item.onclick = function(){

//     }

close.onclick = function(){
    outbox.style.transform = "translateY(-1000px)";
}